<template>
  <div class="page-container">
    <el-card class="box-card">
      <el-row>
      </el-row>
      <div class="table-box">
        <el-table :data="tableList" size="small" class="table-box" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
          <el-table-column prop="title" label="主题"/>
          <el-table-column prop="buyer" label="求购方"/>
          <el-table-column prop="buyProduct" label="求购产品"/>
          <el-table-column prop="releaseDate" label="发布日期"/>
          <el-table-column prop="receivedDate" label="接收日期"/>
          <el-table-column prop="infoOrigin" label="信息来源"/>
          <el-table-column prop="state" label="处理状态"/>
          <el-table-column prop="director" label="跟进人"/>
          <el-table-column label="操作" >
            <template v-slot="{row}">
              <el-button size="small" type="text" @click="viewDetail(row)">查看详情</el-button>
              <el-button size="small" type="text" @click="allocation(row)">分配</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-block">
          <el-pagination
              v-model:currentPage="params.current"
              v-model:page-size="params.size"
              :page-sizes="[10, 20, 30, 40]"
              :small="true"
              :disabled="false"
              :background="false"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              :hide-on-single-page="true"
              @size-change="sizeChange"
              @current-change="getTableList"
          />
        </div>
      </div>
    </el-card>

    <!-- 分配 -->
    <el-dialog v-model="allocationVisible" title="分配" destroy-on-close width="560px">
      <div class="mb-2 flex">
        <el-table :data="customerList" size="small" class="table-box" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
          <el-table-column prop="intactName" label="客户名称"/>
          <el-table-column label="操作" >
            <template v-slot="{row}">
              <el-button size="small" type="primary" icon="ele-Bell" @click="sendBuyMsg(row)">发送</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="small" @click="allocationVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>

    <buy-details v-model:dialogDrawer="buyDetailsVisible" :defaultId="defaultId"/>

  </div>
</template>

<script>
import {reactive, toRefs, ref, onMounted} from 'vue'
import BuyDetails from '/@/views/crm/components/BuyDetails.vue'
import api from '/@/api/commonApi'

export default {
  name: "index",
  components: {
    BuyDetails
  },
  setup() {
    const state = reactive({
      allocationVisible:false,
      buyDetailsVisible:false,
      defaultId:null,
      tableList:[
        {
          id:0,
          title:"主题",
          buyer:"求购方",
          buyProduct:"产品信息",
          releaseDate:"2002-01-01",
          receivedDate:"2023-09-18",
          infoOrigin:"信息来源",
          state:"0",
          director:"跟进人",
        }
      ],
      customerList:[],
      params: {
        current: 1,
        size: 10,
      },
      total: 0,

    })

    //页码
    const sizeChange = (size) => {
      state.params.size = size
      state.params.current = 1
      getTableList()
    }

    //获取数据
    const getTableList = () => {

    }

    //查看详情
    const viewDetail = (row) => {
      row.id = state.defaultId
      state.buyDetailsVisible = true
    }

    //发送求购信息
    const sendBuyMsg = (row) => {

    }

    //分配
    const allocation = (row) => {
      api.customerList().then(res => {
        state.customerList = []
        state.customerList = res.data
        state.allocationVisible = true
      })
    }

    //提交分配
    const submitAllocation = () => {

    }

    onMounted(() => {

    })
    return{
      ...toRefs(state),
      BuyDetails,
      sizeChange,
      getTableList,
      viewDetail,
      allocation,
      submitAllocation,
      sendBuyMsg,

    }

  }
}
</script>

<style lang="scss" scoped>
.page-container {
  .table-box {
    background: #fff;
    margin-top: 10px;

    :deep(.el-table__header-wrapper .el-table__cell) {
      background: var(--el-color-primary-light-9);
      color: var(--next-bg-menuBar-light-1);
    }

    :deep(thead .cell) {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    :deep(thead .el-icon) {
      margin-top: -2px;
      cursor: pointer;
    }

    .primary {
      cursor: pointer;
      color: var(--el-color-primary);
    }

  }
}
</style>
